@extends('layouts.app')

@section('title')
    后台-物品管理
@stop

@section('extcss')
    <!--ext css-->
    <style>
        .btn-color{
            color:#93A2B2;border:1px solid rgba(221,226,232,0.49);
        }
        .table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th{
            vertical-align: middle;
        }
    </style>
    <!-- /ext css-->
@stop

@section('content')
    <!-- page content -->
    <div class="right_col" role="main">
        <div class="">
            <div class="page-title">
                <div class="title_left">
                    <h3>物品管理</h3>
                </div>

                <div class="title_right">
                    <div class="col-md-5 col-sm-12 form-group pull-right top_search">
                        <div class="input-group">
                            <input id="txtKeyWorld" type="text" class="form-control" placeholder="款号查找">
                                <span class="input-group-btn">
                                  <button id="btnSearch" class="btn btn-default" type="button"><i class="fa fa-search" title="查找"></i></button>
                                </span>
                        </div>
                    </div>
                    <div class="col-md-7 col-sm-12 form-group pull-right top_search text-right">
                        <a href="{{url('system/goods/create')}}" class="btn btn-round btn-default btn-color" type="button" title="新增"><i class="fa fa-plus"></i></a>
                        <button id="btnSelectAll" class="btn btn-round btn-default btn-color" type="button" title="删除"><i class="fa fa-trash"></i></button>
                        <a href="javascript:window.location.reload();" class="btn btn-round btn-default btn-color" type="button" title="刷新"><i class="fa fa-refresh"></i></a>
                        <button class="btn btn-round btn-default btn-color" type="button" title="下载"><i class="fa fa-download"></i></button>
                        <button class="btn btn-round btn-default btn-color" type="button" title="打印"><i class="fa fa-print"></i></button>
                    </div>
                </div>
            </div>

            <div class="clearfix"></div>

            <div class="row">
                <div class="col-md-12 col-sm-12 col-xs-12">
                    <div class="x_panel">
                        <div class="x_title">
                            <h2>物品表</h2>
                            <ul class="nav navbar-right panel_toolbox">
                                <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                                </li>
                            </ul>
                            <div class="clearfix"></div>
                        </div>

                        <div class="x_content">
                            <div class="table-responsive">
                                <table class="table table-striped jambo_table bulk_action">
                                    <thead>
                                    <tr class="headings">
                                        <th>
                                            <input type="checkbox" id="check-all" class="flat">
                                        </th>
                                        <th class="column-title">序号</th>
                                        <th class="column-title">名称</th>
                                        <th class="column-title">种类</th>
                                        <th class="column-title">品牌</th>
                                        <th class="column-title">风格</th>
                                        <th class="column-title">穿着位置</th>
                                        <th class="column-title">颜色</th>
                                        <th class="column-title">尺码</th>
                                        <th class="column-title">数量</th>
                                        <th class="column-title">价格</th>
                                        <th class="column-title">状态</th>
                                        <th class="column-title">图样</th>
                                        <th class="column-title">备注</th>
                                        <th class="column-title no-link last"><span class="nobr">操作</span>
                                        </th>
                                        <th class="bulk-actions" colspan="13">
                                            <a class="antoo" style="color:#fff; font-weight:500;">批量操作 ( <span class="action-cnt"> </span> ) <i class="fa fa-chevron-down"></i></a>
                                        </th>
                                    </tr>
                                    </thead>

                                    <tbody>
                                    @forelse($goods as $good)
                                    <tr class="even pointer">
                                        <td class="a-center ">
                                            <input type="checkbox" class="flat" name="table_records" data-whatever="{{$good->id}}">
                                        </td>
                                        <td class=" ">{{$good->serial}}</td>
                                        <td class=" ">{{$good->name}}</td>
                                        <td class=" ">{{$good->category->key}}</td>
                                        <td class=" ">{{$good->brand}}</td>
                                        <td class=" ">{{$good->style->key}}</td>
                                        <td class=" ">{{$good->postion->key}}</td>
                                        <td class=" ">{{$good->color->key}}</td>
                                        <td class=" ">{{$good->size->key}}</td>
                                        <td class=" ">{{$good->number}}</td>
                                        <td class=" ">{{$good->price}}</td>
                                        <td class=" ">{{$good->state}}</td>
                                        <td class="  "><a href="#" data-toggle="modal" data-target=".bs-image-sm" data-whatever="{{asset("upload/images/".($good->picurl ==null ? "default.png":$good->picurl))}}"><i class="fa fa-image"></i></a></td>
                                        <td class="  "><a href="#" data-toggle="modal" data-target=".bs-remark-sm" data-whatever="{{$good->remark}}"><i class="fa fa-ellipsis-h"></i></a></td>
                                        <td class=" last">
                                            <a href="#good_{{$good->id}}" data-toggle="collapse"
                                               aria-expanded="false" aria-controls="good_{{$good->id}}"
                                               title="展开详细信息"><i class="fa fa-pencil"></i></a>
                                            <a href="#" class="btn btn-link btn-sm" data-toggle="modal" data-target="#delModel" title="删除" data-whatever="{{$good->id}}">
                                                <i class="fa fa-trash"></i>
                                            </a>
                                        </td>
                                    </tr>
                                    @empty
                                        <tr class="even pointer">
                                            <td class="a-center text-center" colspan="15">
                                                没有查到记录
                                            </td>
                                        </tr>
                                    @endforelse
                                    </tbody>
                                    <tfoot>
                                    　　<tr>
                                        　　<td colspan="15">
                                            　　　@if($errors->any())
                                                <ul class="list-group">
                                                    @foreach($errors->all() as $error)
                                                        <li class="list-group-item list-group-item-danger">{{$error}}</li>
                                                    @endforeach
                                                </ul>
                                            @endif
                                           </td>
                                    　　</tr>
                                    　</tfoot>
                                </table>
                            </div>
                            <div class="row">
                                <div class="col-md-5 col-xs-12 col-sm-12 col-md-offset-5">{!! $goods->links() !!}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- /page content -->
    <!--goods image model-->
    <div class="modal fade bs-image-sm" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">

                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span>
                    </button>
                    <h4 class="modal-title" id="myModalLabel2">商品图片</h4>
                </div>
                <div class="modal-body text-center">
                    <img src="" class="img-responsive img-thumbnail" alt="Responsive image">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default btn-block" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>
    <!-- /goods image model-->
    <!--goods remark model-->
    <div class="modal fade bs-remark-sm" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">

                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span>
                    </button>
                    <h4 class="modal-title" id="myModalLabel3">商品备注信息</h4>
                </div>
                <div class="modal-body">
                    <p class="lead">...</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default btn-block" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>
    <!-- /goods remark model-->
    <!--goods delete model-->
    <div id="delModel" class="modal fade bs-delete-sm" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">

                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span>
                    </button>
                    <h4 class="modal-title" id="myModalLabel4">删除提醒</h4>
                </div>
                <div class="modal-body">
                    <p class="lead">您确定要删除这行记录吗？</p>
                </div>
                <div class="modal-footer">
                    <div class="row">
                        <div class="col-md-6"><button id="btnModelDel" type="button" class="btn btn-default btn-block">删除</button></div>
                        <div class="col-md-6"><button type="button" class="btn btn-default btn-block" data-dismiss="modal">关闭</button></div>
                    </div>


                </div>
            </div>
        </div>
    </div>
    <!-- /goods remark model-->
@stop

@section('extjs')
    <!--ext js-->
    <!--模态窗口数据绑定-->
    <script>
    $('.bs-image-sm').on('show.bs.modal', function (event) {
        var button = $(event.relatedTarget) ;
        var recipient = button.data('whatever') ;

        var modal = $(this)

        modal.find('img').attr("src",recipient);
        });
    </script>

    <script>
    $('.bs-remark-sm').on('show.bs.modal', function (event) {
    var button = $(event.relatedTarget);
    var recipient = button.data('whatever');

    var modal = $(this)

    modal.find('p').text(recipient);
    });
    </script>
    <!--模态窗口数据绑定-->
    
    <!--Only row delete-->
    <script>
        $('#delModel').on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget) ;
            var recipient = button.data('whatever') ;

            $("#btnModelDel").on('click',function () {
                $.ajax({
                    url: "{{url('system/goods/')}}"+"/" + recipient
                    , async: true
                    , type: "DELETE"
                    , headers: {'X-CSRF-TOKEN': '{{ csrf_token() }}'}
                    , success: function () {
                        $('#delModal').modal('hide');
                        window.location.reload();
                    }
                });
            })
        });

    </script>
    <!-- /Only row delete-->

    <!--Select all delete-->
    <script>
        $("#btnSelectAll").click(function(){

            $('#delModel').modal('show');

            $("#btnModelDel").on('click',function () {

                $(".bulk_action input[name='table_records']:checked").each(function (index,item) {
                    $.ajax({
                        url: "{{url('system/goods/')}}"+"/" + $(item).data('whatever')
                        , async: true
                        , type: "DELETE"
                        , headers: {'X-CSRF-TOKEN': '{{ csrf_token() }}'}
                        , success: function () {
                            $('#delModal').modal('hide');
                            window.location.reload();
                        }
                    });
                });
            });
        });

    </script>
    <!-- /Select all delete-->

    <!--search key world-->
    <script>
        $("#btnSearch").click(function () {
            var keyworld = $("#txtKeyWorld").val();

            window.location.href='/system/goods/'+keyworld;
        });
    </script>
    <!--search key world-->
    <!-- /ext js-->
@stop